<template>
	<div class="home">

		<div class="back_top">
			<div class="toleft" @click="toperson">
				<img src="../../static/myimg/toleft.png" alt="">
			</div>
			<!-- <div class="lookinfo">修改个人资料</div> -->
		</div>
		<div class="head_box">
			<img src="../../static/dog/icon/z.jpg" alt="">
		</div>
		<div class="name">
			<div class="text_title">鱼仔妹妹</div>
			<div class="qrcode_box" @click="showModal" data-target="Image">
				<img src="../../static/myimg/qrcodesma.png" alt="">
			</div>
		</div>
		<div class="qianming">ID:89757</div>
		<div class="pertitle">个人签名
		</div>
		<div class="qianming">还未设置个人签名哦</div>


		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<div class="img_box">
					<img src="../../static/myimg/qrcodesma.png" alt="">
				</div>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">返回</view>
				</view>
			</view>
		</view>

		<div class="type_num">
			<div class="every_box" v-for="item in allarray">
				<div class="text_box">{{item.name}}</div>
				<div class="text_box">{{item.num}}</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		props: {},
		components: {},
		data() {
			return {
				modalName: null,
				allarray: [{
					'name': '粉丝',
					'num': '5'
				}, {
					'name': '关注',
					'num': '10'
				}, {
					'name': '动态',
					'num': '11'
				}]
			}
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			toperson() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		watch: {},

		onReachBottom() { //页面上拉触底事件的处理函数

		},
		onPullDownRefresh() { //监听用户下拉动作，一般用于下拉刷新
			//需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			//uni.startPullDownRefresh(); 开启
			// uni.stopPullDownRefresh(); 关闭
		},
		onUnload() { //监听页面卸载

		},
		onHide() { //监听页面隐藏

		},
		onLoad() { // 替代 created 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例

		},
		onReady() { //替代 mounted 监听页面初次渲染完成

		},

		onShow() { //监听页面显示
			//生命周期
		}
	}
</script>
<style scoped>
	.home {
		width: 100%;
		height: 100%;
	}

	.back_top {
		width: 100%;
		height: 40vw;
		background: url('../../static/dog/1.jpg');
	}

	.type_num {
		width: 100%;
		height: 18vw;
		margin-top: 5vw;
		float: left;
			border-top:1px solid #ededed;
		border-bottom:1px solid #ededed;
	}

	img {
		width: 100%;
		height: 100%;
	}

	.head_box {
		width: 15vw;
		height: 15vw;
		background: red;
		position: relative;
		border-radius: 50px;
		top: -9vw;
		left: 8vw;
		overflow: hidden;
	}

	.toleft {
		width: 7vw;
		height: 7vw;
		padding: 2vw 2vw;
		border-radius: 20px;
	}

	.lookinfo {
		width: 25vw;
		heihgt: 5vw;
		float: right;
		color: white;
		font-size: 10px;
		text-align: center;
		background: black;
		opacity: 0.5;
		margin-top: -55upx;
		margin-right: 10px;
		border-radius: 10px;
	}

	.name {
		width: 80%;
		height: 7vw;
		margin-left: 7.5%;
		float: left;
		font-weight: bold;
	}

	.qrcode_box {
		width: 7vw;
		height: 6vw;
		float: left;
	}

	.qianming {
		width: 85%;
		margin: auto;
		font-size: 10px;
		color: gray;
		float: left;
		margin-top: 5px;
		margin-left: 7.5%;
	}

	.pertitle {
		width: 85%;
		height: 5vw;
		margin: auto;
		margin-top: 10px;

		float: left;

		margin-left: 7.5%;

	}

	.every_box {
		margin-top: 5px;
	

		width: 25vw;
		height: 25vw;
		margin-left: 6%;
		float: left;
	}

	.text_title {
		width: 90%;
		float: left;
	}

	.text_box {
		width: 100%;
		height: 30%;
		text-align: center;
		line-height: 7vw;
	}
</style>
